// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView, InteractionManager } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import Icon from 'react-native-vector-icons/Ionicons';
import LinearGradient from 'react-native-linear-gradient';
import { Actions } from 'react-native-router-flux';

// antd 按需加载
import { Modal, Tabs, Toast } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { getOrderInfo } from './module/module.js'
import { cancelOrder } from '../OrderList/module/module.js'
import { pay } from '../Pay/module/module.js'

// 引入样式
import Style from './style/style.js';

// 引入公用组件
import { Status, NavBar, RnImage } from '../../components/index.js'

// 引入专用组件
import { } from './components'

// 引入工具包
import { press, size, ScreenWidth } from '../../util/utils.js'
class OrderInfo extends Component {
  constructor(props) {
    super(props)
    this.state = {
      refreshing: false,
      orderInfo: null,
      payInfo: {
        isPay: false
      },
    }
    this.getOrderInfo = getOrderInfo.bind(this)
    this.cancelOrder = cancelOrder.bind(this)
    this.pay = pay.bind(this)
  }

  componentDidMount() {
    const { id } = this.props
    this.getOrderInfo({ orderId: id }).then(res => {

      this.setState({
        orderInfo: res.data.data
      })
    })

    let sn = {
      autoConfirmDay: null,
      billContent: null,
      billHeader: null,
      billReceiverEmail: null,
      billReceiverPhone: null,
      billType: null,
      commentTime: null,
      confirmStatus: 0,
      couponAmount: 0,
      couponId: 0,
      createTime: "2019-07-23T08:11:31.000+0000",
      deleteStatus: 0,
      deliveryCompany: null,
      deliverySn: null,
      deliveryTime: null,
      discountAmount: 0,
      freightAmount: 0,
      growth: 0,
      id: 65, // 订单id
      integration: 0,
      integrationAmount: 0,
      memberId: 10, // 会员id
      memberUsername: "tom",
      modifyTime: null,
      note: null,
      orderSn: "847734894107824128", // 
      orderType: 0,
      payAmount: 0,
      payType: 3,
      paymentTime: null,
      promotionAmount: 0,
      promotionInfo: "无优惠",
      receiveTime: null,
      receiverCity: "深圳市",
      receiverDetailAddress: "科兴科学园1112222333",
      receiverName: "大梨",
      receiverPhone: "18033441849",
      receiverPostCode: "518000",
      receiverProvince: null,
      receiverRegion: "1",
      sourceType: 1,
      status: 0,
      totalAmount: 0,
      useIntegration: null,
    }
  }



  renderOrderButton() {
    const { orderInfo } = this.state
    if (orderInfo.status == 0) {
      // 待付款
      return (
        <View style={{
          flexDirection: 'row',
          justifyContent: 'flex-end',
          alignItems: 'center',
          padding: 10,
          borderTopWidth: .5,
          borderStyle: 'solid',
          borderTopColor: '#e5e5e5',
        }}>
          <TouchableOpacity
            onPress={() => {
              this.pay({
                orderNo: orderInfo.orderSn,
                payMode: orderInfo.payType
              }).then(res => {
                this.setState({
                  payInfo: {
                    orderNo: orderInfo.orderSn,
                    payMode: orderInfo.payType,
                    isPay: true,
                  }
                }, () => {
                  Actions.payResults({ html: res.data.data })
                })
              })
            }}
            style={{
              marginLeft: 15,
              width: 100,
              borderWidth: .5,
              borderStyle: 'solid',
              borderColor: '#ddd',
              borderRadius: 6,
              backgroundColor: '#fff',
            }}
          >
            <Text style={{ fontSize: 14, textAlign: 'center', color: '#61676F', lineHeight: 32, }}>现在支付</Text>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => {
              Modal.alert('系统提示', '确认删除该订单？', [
                {
                  text: <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>取消</Text>,
                  onPress: () => console.log('cancel'),
                  style: 'cancel',
                },
                {
                  text: <Text style={{ fontSize: 14, color: 'red', lineHeight: 16, }}>确定</Text>,
                  onPress: () => this.cancelOrder(orderInfo.orderSn)
                }
              ])
            }}
            style={{
              marginLeft: 15,
              width: 100,
              borderWidth: .5,
              borderStyle: 'solid',
              borderColor: '#ddd',
              borderRadius: 6,
              backgroundColor: '#fff',
            }}
          >
            <Text style={{ fontSize: 14, textAlign: 'center', color: '#61676F', lineHeight: 32, }}>删除订单</Text>
          </TouchableOpacity>
        </View>
      )
    }
    if (orderInfo.status == 1) {
      // 待发货

    }
    if (orderInfo.status == 2) {
      // 已发货

    }
    if (orderInfo.status == 3) {
      // 已完成

    }
    if (orderInfo.status == 4) {
      // 已关闭

    }
    if (orderInfo.status == 5) {
      // 无效订单

    }
  }

  render() {
    const { orderInfo } = this.state
    return (
      <View style={Style.container}>
        <Status />
        <NavBar
          title="订单详情"
          back={true}
        />
        <ScrollView style={[Style.content, {
          backgroundColor: '#f0f2f5'
        }]}>
          {orderInfo ? (
            <View
              style={{}}
            >
              <LinearGradient
                colors={['#eb3c3c', '#ff7459']}
                start={{ x: 0, y: 0 }}
                end={{ x: 1, y: 0 }}
                style={{
                }}
              >
                <View style={{
                  padding: 15,
                }}>
                  {orderInfo.status == 0 ? <Text style={{ fontSize: 16, color: '#fff', lineHeight: 36, }}>待付款</Text> : null}
                  {orderInfo.status == 1 ? <Text style={{ fontSize: 16, color: '#fff', lineHeight: 36, }}>待发货</Text> : null}
                  {orderInfo.status == 2 ? <Text style={{ fontSize: 16, color: '#fff', lineHeight: 36, }}>已发货</Text> : null}
                  {orderInfo.status == 3 ? <Text style={{ fontSize: 16, color: '#fff', lineHeight: 36, }}>已完成</Text> : null}
                  {orderInfo.status == 4 ? <Text style={{ fontSize: 16, color: '#fff', lineHeight: 36, }}>已关闭</Text> : null}
                  {orderInfo.status == 5 ? <Text style={{ fontSize: 16, color: '#fff', lineHeight: 36, }}>删除订单</Text> : null}
                </View>
              </LinearGradient>
              <View style={{
                padding: 15,
                flexDirection: 'row',
                alignItems: 'center',
                backgroundColor: '#fff',
                marginBottom: 10,
                borderRadius: 6,
              }}>
                <Icon name={'md-pin'} size={22} color={'#666'} />
                <View style={{
                  marginLeft: 10
                }}>
                  <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 10 }}>
                    <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>收件人：{orderInfo.receiverName}</Text>
                    <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, marginLeft: 30 }}>{orderInfo.receiverPhone}</Text>
                  </View>
                  <View style={{
                    flexDirection: 'row',
                  }}>
                    <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>收货地址：</Text>
                    <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, flex: 1 }} numberOfLines={10} >{orderInfo.countryCn} {orderInfo.receiverCity} {orderInfo.receiverDetailAddress}</Text>
                  </View>
                </View>
              </View>
              <View style={{
                marginBottom: 10,
                backgroundColor: '#fff'
              }}>
                <View style={{
                  padding: 10,
                  flexDirection: 'row',
                  alignItems: 'flex-start',
                  justifyContent: 'space-between',
                }}>
                  {orderInfo.orderType == 0 ? <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>在线</Text> : null}
                  {orderInfo.orderType == 1 ? <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>预购订单</Text> : null}
                  {orderInfo.orderType == 2 ? <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>书籍代购</Text> : null}
                  {orderInfo.orderType == 3 ? <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>杂志代购</Text> : null}
                </View>
                <View
                  style={{
                    paddingVertical: 5,
                    backgroundColor: '#f7f7f7'
                  }}
                >
                  {orderInfo.orderItemList.map((orderItem, index) => {
                    return (
                      <View style={{
                        flexDirection: 'row',
                        alignItems: 'center',
                        paddingVertical: 5,
                        paddingLeft: 10,
                      }}>
                        <RnImage resizeMode='cover' style={{ backgroundColor: '#ccc', width: 80, height: 80 }} uri={orderItem.productPic} />
                        <View style={{
                          flex: 1,
                          paddingLeft: 10,
                        }}>
                          <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>{orderItem.productName}</Text>
                        </View>
                        <View style={{
                          paddingHorizontal: 10,
                          flexDirection: 'column',
                          alignItems: 'flex-end',
                        }}>
                          <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, marginBottom: 10 }}>RM {orderItem.productPrice}</Text>
                          <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>X {orderItem.productQuantity}</Text>
                        </View>
                      </View>
                    )
                  })}
                </View>
                {this.renderOrderButton(orderInfo)}
              </View>

              <View style={{
                backgroundColor: '#fff',
                marginBottom: 10,
                borderRadius: 6,
                paddingVertical: 8,
              }}>
                <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', padding: 15, paddingVertical: 8 }}>
                  <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>订单编号</Text>
                  <Text style={{ fontSize: 14, color: '#333', lineHeight: 16, }}>{orderInfo.orderSn}</Text>
                </View>
                <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', padding: 15, paddingVertical: 8 }}>
                  <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>下单时间</Text>
                  <Text style={{ fontSize: 14, color: '#333', lineHeight: 16, }}>{orderInfo.createTime}</Text>
                </View>
                <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', padding: 15, paddingVertical: 8 }}>
                  <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>支付方式</Text>
                  <Text style={{ fontSize: 14, color: '#f23030', lineHeight: 16, }}>
                    {orderInfo.payType == 3 ? 'online-pay' : null}
                    {orderInfo.payType == 4 ? '表示ATM转账' : null}
                  </Text>
                </View>
                <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', padding: 15, paddingVertical: 8 }}>
                  <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>物流公司</Text>
                  <Text style={{ fontSize: 14, color: '#f23030', lineHeight: 16, }}>{orderInfo.deliveryCompany}</Text>
                </View>
                <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', padding: 15, paddingVertical: 8 }}>
                  <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>物流单号</Text>
                  <Text style={{ fontSize: 14, color: '#f23030', lineHeight: 16, }}>{orderInfo.deliverySn}</Text>
                </View>
                <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', padding: 15, paddingVertical: 8 }}>
                  <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>发货时间</Text>
                  <Text style={{ fontSize: 14, color: '#f23030', lineHeight: 16, }}>{orderInfo.deliveryTime}</Text>
                </View>
              </View>
              <View style={{
                backgroundColor: '#fff',
                marginBottom: 10,
                borderRadius: 6,
                paddingVertical: 8,
              }}>
                <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', padding: 15, paddingVertical: 8 }}>
                  <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>商品总额</Text>
                  <Text style={{ fontSize: 14, color: '#333', lineHeight: 16, }}>RM {orderInfo.totalAmount}</Text>
                </View>
                <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', padding: 15, paddingVertical: 8 }}>
                  <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>运费</Text>
                  <Text style={{ fontSize: 14, color: '#333', lineHeight: 16, }}>RM {orderInfo.freightAmount}</Text>
                </View>
                <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', padding: 15, paddingVertical: 8 }}>
                  <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>实付</Text>
                  <Text style={{ fontSize: 14, color: '#333', lineHeight: 16, }}>RM {orderInfo.payAmount}</Text>
                </View>
              </View>
            </View>
          ) : null}
        </ScrollView>
      </View >
    );
  }
}


export default connect(({ user }) => ({
  user,
}))(pureRender(OrderInfo))
